<template>
    <el-dialog title="销毁详情" :visible.sync="isDetailOpen" width="85%" :before-close="closeDelDialogjyxq" append-to-body>
        <div style="width:80%;margin:0 auto;padding:20px 0">

            <h2>销毁详情</h2>
            <el-row ref="queryForm">
                <el-col :span="24">
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-row>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="">
                                    <span slot="label">
                                        <em style="color:red"> * </em>
                                        申请人
                                    </span>
                                    <treeselect v-model="form.borrowUser" :options="deptUserOptions"
                                        :normalizer="normalizer" noResultsText="暂无数据" placeholder="请选择申请人"
                                        :disable-branch-nodes="true" disabled />
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="" prop="borrowDept">
                                    <span slot="label">
                                        <em style="color:red"> * </em>
                                        申请部门
                                    </span>
                                    <treeselect v-model="form.borrowDept" :options="deptOptions" noResultsText="暂无数据"
                                        placeholder="请选择申请部门" disabled/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="申请日期" prop="dengJiTime">
                                    <el-input v-model="form.dengJiTime" readonly class="input-border"
                                        style="width: 100%" disabled></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="">
                                    <span slot="label">
                                        <em style="color:red"> * </em>
                                        借阅天数
                                    </span>
                                    <el-input-number type="number" v-model="form.borrowDays" placeholder="请选择" :min="0"
                                        :max="30" style="width: 100%" disabled>
                                        <!--<el-option v-for="dict in dict.type.JYTS" :key="dict.value" :label="dict.label" :value="dict.value" />-->
                                    </el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="">
                                    <span slot="label">
                                        <em style="color:red"> * </em>
                                        利用目的
                                    </span>
                                    <el-select disabled v-model="form.yongtu" placeholder="请选择" clearable style="width: 100%">
                                        <el-option v-for="dict in dict.type.LYMD" :key="dict.value" :label="dict.label"
                                            :value="dict.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="联系方式">
                                    <el-input v-model="form.phoneNum" type="phone" :rows="3" :max='11' disabled></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="">
                                    <span slot="label">
                                        <em style="color:red"> * </em>
                                        是否实体
                                    </span>
                                    <el-select v-model="form.daType" placeholder="请选择" clearable style="width: 100%" disabled>
                                        <el-option key="E" label="电子" value="E" />
                                        <el-option key="F" label="实体" value="F" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5" :xs="24" v-show="form.daType == 'F'">
                                <el-form-item label="现场查看" prop="branchCode"
                                    v-has-permi="['archive:borrow:OnSiteInspection']">
                                    <el-switch v-model="form.branchCode" active-value="1" inactive-value="0" active-text="是"
                                        inactive-text="否" disabled/>
                                </el-form-item>

                            </el-col>
                            <el-col :span="6" :xs="24" v-show="form.daType == 'F'">
                                <el-form-item label="利用方式" prop="liyongfangshi">
                                    <el-radio-group v-model="form.liyongfangshi" disabled>
                                        <el-radio :label="'1'">复印件</el-radio>
                                        <el-radio :label="'2'">原件</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>

                        </el-row>
                        <el-row v-show="form.daType == 'E'">
                            <el-col :span="11" :xs="24">
                                <el-form-item label="是否下载" prop="branchCode">
                                    <el-switch v-model="form.allowDownload" active-value="1" inactive-value="0"
                                        active-text="是" inactive-text="否" disabled/>
                                </el-form-item>
                                <el-form-item label="是否打印">
                                    <el-switch v-model="form.allowPrint" active-value="1" inactive-value="0" active-text="是"
                                        inactive-text="否" disabled/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="11" :xs="24">
                                <el-form-item label="下载次数">
                                    <el-input-number v-model="form.downloadNum" type="number" :rows="3" :min="0"
                                        :max="10" disabled></el-input-number>
                                </el-form-item>
                                <el-form-item label="打印次数">
                                    <el-input-number v-model="form.printNum" type="number" :rows="3" :min="0"
                                        :max="10" disabled></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>


                        <el-row>
                            <el-col :span="22" :xs="24">
                                <el-form-item label="备 注">
                                    <el-input v-model="form.beizhu" type="textarea" :rows="3" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>


                    </el-form>
                </el-col>
            </el-row>
            <div class="tableData">
                <el-table :data="tableDataList"  border align="center"
                    header-align="center" :loading="loading" :row-key="getRowKeys" lazy :load="load"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 96%" :height="height">
                    <el-table-column type="selection" width="55" align="center" prop="ID" :selectable="checkboxSelect">
                    </el-table-column>
                    <!-- <el-table-column label="审批意见" width="200" align="center" v-if="istype == '3' || istype == '2'"
                        fixed="left">
                        <template slot-scope="scope">
                            <el-radio-group v-model="scope.row.archiveAgreeStatus"
                                :disabled="istype == '3' || cloumnApproval || scope.row.archiveAgreeStatusCanEdit == '0'"
                                @change="chanageStatus(scope.row)" v-if="scope.row.isChildren != '1'">
                                <el-radio :label="'0'">不同意</el-radio>
                                <el-radio :label="'1'">同意</el-radio>
                            </el-radio-group>
                        </template>
                    </el-table-column> -->
                    <el-table-column width="160" align="center" label="操作"   prop="ID" >
                        <template slot-scope="scope">
                            <el-button class="wenjianannniu" type="text" icon="el-icon-view" plain
                                @click="celldblclick(scope.row)"
                                size="mini"
                                title="查看详情"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="TITLE" label="题名" width="200" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{ scope.row.archiveData.DA_TYPE == 'x' ? scope.row.archiveData.XMMC : scope.row.archiveData.TITLE }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BORROW_TYPE" label="借阅类型" width="200" align="center"
                        :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{ scope.row.archiveData.BORROW_TYPE == 'E' ? '电子文件' : '实体件' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="DH" label="档号" width="200" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.archiveData.DH}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="RQ" label="日期" width="120" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.archiveData.RQ}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="BGQX" label="保管期限" width="120" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-for="(i, idx) in dict.type.BGQX" :key="idx">
                                {{ scope.row.archiveData.BGQX == i.value ? i.label : '' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="STJSFJC" label="实体是否借出" width="120" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-for="(i, idx) in dict.type.STJSFJC" :key="idx">
                                {{ scope.row.archiveData.STJSFJC == i.value ? i.label : '' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="CREATE_BY" label="创建人" width="120" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.archiveData.CREATE_BY}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ZRZ" label="责任者" width="120" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.archiveData.ZRZ}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="BZ" label="备注" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span>{{scope.row.archiveData.BZ}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--start  组件详情 -->
            <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" module="borrowReceipt" :celldbData="celldbData"
                @detailsHandleClose="detailsHandleClose">
            </jianDetailsOpen>
            <!--end 组件详情 -->
            <!-- start 组卷\项目详情 -->
            <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData" module="borrowReceipt"
                @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
            <!-- end 组卷\项目详情 -->

        </div>
    </el-dialog>
</template>
<script>
import { deptTreeNoDateScope, getUserProfile } from "@/api/system/user";
import estimateTableHeight from '@/mixins/estimateTableHeight' //vue项目中element-tabel自动计算高度
import {
    deptUserTree,
    getArchiveInfo,
    getthbytreenodeHeaderList,
    setArchiveProcessStatusByArchiveId,
} from "@/api/archive/archiveDestroy/archiveDestroyReceipt.js" //档案整理接口
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情
import { getLastIndexOf } from "@/utils";
import { getRouters } from "@/api/menu";

import { getArchiveBorrow, getdetailBorrowID } from "@/api/archive/archiveBorrow/archiveBorrow";//借阅详情

export default {
    name: "借阅详情",
    archive_Dicts: ['LYMD', 'BGQX', 'JYTS', 'STJSFJC'], // 利用目的字典项
    props: ["isShow", "roleUserList", 'isDetailOpen', 'dataRow'],
    mixins: [estimateTableHeight], // 混入方法
    components: { Treeselect, jianDetailsOpen, juanDetailsOpen },
    data() {
        return {
            form: {
            },

            tableDataList: [],//申请单列表
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,

            getRowKeys(row) {
                return row.ID;
            },
            expands: [],
            // 部门树选项
            deptOptions: [],
            cloumnApproval: false,
            // 人员树选项
            deptUserOptions: [],
            roleUserOptions: [],
            dengJiTime: "",
            isShowInfo: false,
            taskId: '',
            height: undefined,
            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            chooseNextAssignee: false,
            chooseNextAssigneeByRoleKey: false,
            // 是否出现审批人
            isShowApprover: false,
            isGetNextTaskOptionId: false, // 办结流程  true显示 false不显示
        }

    },
    watch: {
        dataRow: {
            handler(valNew) {
                this.getdetailBorrow(valNew.borrowId)
                this.getArchiveBorrowlist(valNew.borrowId);
            },
            immediate: true
        }
    },
    created() {
        getRouters().then(res => {
            this.routeList = res.data
        })
        this.getConfigKey("NEXT_ASSIGNEE_ROLE_KEY").then(response => {
            if (response.msg == '' || esponse.msg == 'null') {
                this.chooseNextAssignee = false
            } else {
                this.chooseNextAssignee = true
            }
        });
        this.getConfigKey("NEXT_ASSIGNEE_BY_ROLE_KEY").then(response => {
            if (response.msg == 'true') {
                this.chooseNextAssigneeByRoleKey = true
            } else {
                this.chooseNextAssigneeByRoleKey = false
            }
        });
        this.getDeptTreePost(); //归属部门树接口
        this.deptUserTreePost();//获取人员树接口
    },
    filters: {
        formattedTime(value) {
            // 格式化日期，你可以使用任何适合你的格式
            const date = new Date(value);
            return date.toLocaleDateString(); // 返回格式化后的日期字符串
        },
    },
    methods: {

        appendUser(node) {
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          this.appendUser(child);
        });
      }
      if (node.userChildren && node.userChildren.length > 0) {
        node.userChildren.forEach(user => {
          user.nodeType = 'user'; // 添加 nodeType 属性
        });
        node.children = [...(node.children || []), ...node.userChildren];
        delete node.userChildren;
      }
    },
        normalizer(node) {
            if (node.nodeType != 'user') {
                if (node.children == undefined) {
                    node["children"] = undefined
                    node['isDisabled'] = true;
                }
            }
        },
        /** archiveBorrowItem序号 */
        rowYqdaborrowItemIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        getdetailBorrow(borrowid) {
            var that = this;
            getdetailBorrowID(borrowid).then(res => {
                console.log(res)
                this.form = res.data;
                if (res.data.dengJiTime != undefined) {
                    this.form.dengJiTime = this.processingTime(res.data.dengJiTime * 1);
                }
            })
        },

        processingTime(time) {
            const date = new Date(time);
            // 获取日期的年、月、日
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
            const day = String(date.getDate()).padStart(2, '0');
            // 获取时间的小时、分钟、秒
            // const hours = String(date.getHours()).padStart(2, '0');
            // const minutes = String(date.getMinutes()).padStart(2, '0');
            // const seconds = String(date.getSeconds()).padStart(2, '0');
            // 构建日期时间字符串
            return `${year}-${month}-${day}`;
        },
        getArchiveBorrowlist(borrowId) {
            this.loading = true;
            getArchiveBorrow(borrowId).then(res => {
                this.loading = false;
                if (res.code == "200") {
                    this.tableDataList = res.data.yqdaborrowItemList;
                    for (let i = 0; i < res.data.yqdaborrowItemList.length; i++) {
                        this.tableDataList[i].hasChildren = true
                    }
                } else if (res.data == undefined) {
                    this.tableDataList = [];
                }
            })
        },


        //关闭
        closeDelDialogjyxq() {
            this.$emit("closeDelDialogjyxq")
        },


        getUserProfile() {
            getUserProfile().then(response => {
                this.$set(this.form, 'borrowUser', response.data.userId)
                this.$set(this.form, 'borrowDept', response.data.deptId)
                this.$set(this.form, 'phoneNum', response.data.phonenumber)
                //this.$set(this.form, 'isEntry', response.data.isEntry)
            });
        },
        // processingTime(time) {
        //     const date = new Date(time);
        //     // 获取日期的年、月、日
        //     const year = date.getFullYear();
        //     const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
        //     const day = String(date.getDate()).padStart(2, '0');
        //     // 获取时间的小时、分钟、秒
        //     // const hours = String(date.getHours()).padStart(2, '0');
        //     // const minutes = String(date.getMinutes()).padStart(2, '0');
        //     // const seconds = String(date.getSeconds()).padStart(2, '0');
        //     // 构建日期时间字符串
        //     return `${year}-${month}-${day}`;
        // },

        formattedTime(value) {
            // 格式化日期，你可以使用任何适合你的格式
            const date = new Date(value);
            return date.toLocaleDateString(); // 返回格式化后的日期字符串
        },


        /** 查询部门下拉树结构 */
        getDeptTreePost() {
            deptTreeNoDateScope().then(response => {
                this.deptOptions = response.data;
            });
        },

        /**获取人员树接口 */
        deptUserTreePost() {

            deptUserTree().then(response => {
                this.deptUserOptions = response.data;
                if (this.deptUserOptions != undefined) {
                    // 重命名树结构中的字段
                    this.deptUserOptions.forEach(node => {
                        this.appendUser(node);
                    });
                }

            });

        },

        /** 复选框选中数据 */
        handleYqdaborrowItemSelectionChange(selection) {
            this.checkedYqdaborrowItem = selection.map(item => item.index)
        },


        // 懒加载表格数据
        load(tree, treeNode, resolve) {
            console.log(tree,"dlksfjkl")
            setTimeout(() => {
                var level = "";
                if (getLastIndexOf(tree.archiveData.SUBTABLENAME) == "F") {  //F 件
                    level = 'efile'
                } else if (getLastIndexOf(tree.archiveData.SUBTABLENAME) == "V") { //卷
                    level = 'jian'
                } else { //项目
                    level = 'juan'
                }
                const menuId = this.$route.meta.menuId
                const archiveId = tree.archiveData.ID
                const categoryId = tree.archiveData.CATEGORY_ID
                if (level != 'efile') {
                    getArchiveInfo(
                        {
                            menuId: menuId, level: level, archiveId: archiveId, categoryId: categoryId
                        }
                    ).then(response => {
                        for (let i = 0; i < response.rows.length; i++) {
                            response.rows[i].hasChildren = true
                            response.rows[i].isChildren = '1'
                        }
                        resolve(response.rows)
                    })
                } else {
                    resolve([])
                }
            }, 1000)
        },
        // 是否禁用多选框
        checkboxSelect(row) {
            if (row.isChildren == '1') {
                return false
            } else {
                return true
            }
        },

        findNodeById(id, nodes) {
            for (const node of nodes) {
                if (node.id == id) {
                    return node;
                }
                if (node.children) {
                    const result = this.findNodeById(id, node.children);
                    if (result) {
                        return result;
                    }
                }
            }
            return null;
        },
        detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;
        },

        //双击列表进入详情页面
        celldblclick(row) {
            console.log(row, "----------")
            this.borrowItemId = row.itemId
            if (row.status == '0' && row.state == '1') {
                var level = "";
                if (getLastIndexOf(row.subTableName) == "F") {  //F 件
                    level = 0
                } else if (getLastIndexOf(row.subTableName) == "V") { //卷
                    level = 1
                } else { //项目
                    level = 3
                }
                getthbytreenodeHeaderList(
                    {
                        categoryId: row.categoryId, menuId: this.$route.meta.menuId, subTableName: row.subTableName
                    }
                ).then(response => {
                    var tableHeaderList = response.rows
                    this.celldbData = {
                        id: row.daId,
                        categoryId: row.categoryId,
                        menuId: this.$route.meta.menuId,
                        sub_table_name: row.subTableName,
                        label: row.archiveData.TITLE,
                        level: level,
                        ifSub_table_name: row.subTableName,
                        borrowId: this.borrowIds, // 判断是借阅单数据还是其他数据  借阅单需要传递  其他数据不需要传递
                        tableHeaderList: tableHeaderList,
                        isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
                        isShowjieyue: true,//借阅中
                        borrowIdofd: "1" //借阅ofd预览
                    }
                    console.log(this.celldbData, "liuhaiorng")

                    this.$nextTick(() => {
                        if (getLastIndexOf(row.subTableName) == "F") {  //F 进入件详情
                            this.jianDetailsOpen = true;
                        } else { //进入卷详情 和项目详情
                            this.juanDetailsOpen = true
                        }
                    })
                })
            } else if (row.status == '0' && row.state == '0') {
                this.$modal.msgWarning('实体件借阅后请去线下领取')
            } else {
                //this.$modal.msgWarning('未在借阅状态')
            }
        },
        //隐藏展开箭头
        getRowClass(row) {
            if (row.row.children1 === undefined) {
                return 'row-expand-cover';
            }
            if (row.row.children1.children2 === undefined) {
                return 'row-expand-cover';
            }
        },
        chanageStatus(row) {
            this.form = {
                processId: this.processId,
                archiveId: row.ID,
                status: row.archiveAgreeStatus
            }
            setArchiveProcessStatusByArchiveId(this.form).then(response => {
                this.init(this.info)
                this.flag = true
                this.form.resource = 2;
                this.$forceUpdate();
            })
        },
        hasRoute(path, routeList) {
            !routeList && (routeList = this.routeList, console.log('执行'))
            for (let i = 0; i < routeList.length; i++) {
                if (routeList[i].path == path) {
                    // console.log(routeList[i].path, path, "shuju")
                    return true
                }
                if (routeList[i].children) {
                    let flag = this.hasRoute(path, routeList[i].children)
                    // console.log(path, routeList[i].children, "000")
                    if (flag) {
                        return flag
                    }
                }
            }
            return false
        },
    }
}
</script>
<style lang="scss" scoped>
h2 {
    display: block;
    text-align: center;
    line-height: 30px;
    font-size: 30px;
    font-weight: bold;
}

.j_content {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.margin_top {
    margin-top: 20px
}

::v-deep .input-border input {
    border: 0 !important;
}

.tableData {
    overflow-y: auto;
    width: 90%;
    margin: 20px auto 0;
}

.wenjianannniu {
    font-size: 18px;
    margin-left: 2px;
}
</style>
